<template>
	<view style="display: flex;flex-direction: column">
		<view class="container" style="display: flex;gap: 20rpx;">
			<view style="flex: 1;" class="right">
				<view style="display: flex;gap: 20rpx;flex-direction: column;">
					<view style="flex: 1;display: flex;gap: 20rpx;align-items: center;font-size: 12rpx;">
						<span>From1区域</span>
						<uni-data-select
							style="max-width: 200rpx;font-size: 12rpx;"
							:clear="false"
							v-model="fromValue1"
							:localdata="fromRange1"
							@change="fromChange($event, 1)"
							:disabled="query.kurumaId !== ''"
						></uni-data-select>
					</view>
					<view style="flex: 1;display: flex;gap: 20rpx;align-items: center;font-size: 12rpx;">
						<span>From1线体</span>
						<uni-data-select
							style="max-width: 200rpx;font-size: 12rpx;"
							:clear="false"
							v-model="fromValue2"
							:localdata="fromRange2"
							@change="fromChange($event, 2)"
						></uni-data-select>
					</view>
					<view style="flex: 1;display: flex;gap: 20rpx;align-items: center;font-size: 12rpx;">
						<span>From1站点</span>
						<uni-data-select
							style="max-width: 200rpx;font-size: 12rpx;"
							:clear="false"
							v-model="fromValue3"
							:localdata="fromRange3"
							@change="fromChange($event, 3)"
						></uni-data-select>
					</view>
					<view style="flex: 1;display: flex;gap: 20rpx;align-items: center;">
						<span style="font-size: 12rpx;">From1储位</span>
						<view style="position: relative;max-width: 200rpx;flex: 1;">
							<u--input
								placeholder="请扫描或选择"
								v-model="fromValue4"
								@blur="blurInput"
								@focus="focusInput"
								@confirm="confirmInput"
								clearable
								@clear="clearInput(1)"
							>
							</u--input>
							<view v-if="visible" style="width: 100%;position: absolute; overflow-y: scroll;max-height: 360rpx;border: 1rpx solid #dadbde;background-color: #fff;z-index: 999;border-radius: 10rpx;box-sizing: border-box;padding: 15rpx 0;font-size: 12rpx;">
								<view v-for="(item, index) in fromRange4"
									:key="index"
									class="people-item"
									@click="clickItem(item)"
								>
									{{ item.text }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right" style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
				<u--form ref="queryForm" :model="query">
				  <u-form-item label="" prop="kurumaId">
				    <span style="font-size: 14rpx;margin-right: 20rpx;">台车ID</span>
				    <u--input 
				    	placeholder="请输入/扫描" 
				    	v-model="query.kurumaId" 
				    	suffixIcon="scan"
				    	suffixIconStyle="font-size: 48rpx"
				    	style="flex: 1;"
							:disabled="fromValue1 !== '' || fromValue4 !== ''"
				    >
				    </u--input>
				  </u-form-item>
				</u--form>
			</view>
		</view>
		<view class="bottom" style="flex: 1;">
			<view style="margin: 0 15rpx 10rpx;" class="buttonContainer">
				<u-button type="primary" @click="queryInfo">
					查询
					<!-- <u-icon name="lock" size="35px"></u-icon> -->
				</u-button>
			</view>
			<view class="uu-table">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="100" align="center">储位号</uni-th>
						<uni-th width="100" align="center">台车ID</uni-th>
						<uni-th width="100" align="center">料号</uni-th>
						<uni-th width="100" align="center">数量</uni-th>
						<uni-th width="100" align="center">批号</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in list" :key="index">
						<uni-td width="50">{{ item.storageId }}</uni-td>
						<uni-td width="50">{{ item.containerId }}</uni-td>
						<uni-td width="50">{{ item.materialNo }}</uni-td>
						<uni-td width="50">{{ item.materialNum }}</uni-td>
						<uni-td width="50">{{ item.materialBatch }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="commonButton">
			<u-button type="primary" :disabled="list.length === 0" @click="unBind">确认解绑</u-button>
			<u-button type="warning" @click="reset">重置</u-button>
		</view>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { getListAPI, unBindKurumaAPI, checkInfoAPI, searchDescriptionAPI } from '@/api/work/wcsStorage'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			uniDataSelect,
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				fromValue1: '',
				fromValue2: '',
				fromValue3: '',
				fromValue4: '',
				fromRange1: [],
				fromRange2: [],
				fromRange3: [],
				fromRange4: [],
				query: {
					kurumaId: ''
				},
				list: [],
				keyList: [
					{
						text: '1123'
					},
					{
						text: '11234'
					}
				],
				visible: false,
				timer: null
			};
		},
		// onLoad(options) {
		// 	uni.$on('scancodedate',(data) => this.getCode(data.code))
		// },
		// onUnload() {
		// 	uni.$off('scancodedate')
		// },
		mounted() {
			this.getList()
		},
		onUnload() {
			this.clearTimer(this.timer)
		},
		methods: {
			// getCode(code) {
			// 	const regex = /^TC/
			// 	if (regex.test(code)) {
			// 		this.query.kurumaId = code
			// 	}
			// },
			clickItem(item) {
				if (Object.keys(item).length > 0) {
					this.fromValue4 = item.value
					this.blurInput()
				}
				// console.log(item.value)
			},
			async getList() {
				const submitForm = {
					storageArea: '',
					storageId: '',
					storageLine: '',
					storagePoint: ''
				}
				const res = await getListAPI(submitForm)
				if (res.code === 200) {
					this.fromRange1 = res.data.storageArea.map(item => {
						return {
							text: item,
							value: item
						}
					})
				}
			},
			reset() {
				this.fromValue1 = ''
				this.fromValue2 = ''
				this.fromValue3 = ''
				this.fromValue4 = ''
				this.fromRange2 = []
				this.fromRange3 = []
				this.fromRange4 = []
				this.list = []
				this.query.kurumaId = ''
				this.getList()
			},
			async fromChange(e, index) {
				const submitForm = {
					storageArea: '',
					storageLine: '',
					storagePoint: '',
					storageId: ''
				}
				switch(index) {
					case 1:
						submitForm.storageArea = e
						this.fromValue2 = ''
						this.fromValue3 = ''
						this.fromValue4 = ''
						this.fromRange3 = []
						this.fromRange4 = []
						break
					case 2:
						submitForm.storageArea = this.fromValue1
						submitForm.storageLine = e
						this.fromValue3 = ''
						this.fromValue4 = ''
						this.fromRange4 = []
						break
					case 3:
						submitForm.storageArea = this.fromValue1
						submitForm.storageLine = this.fromValue2
						submitForm.storagePoint = e
						this.fromValue4 = ''
						this.fromRange4 = []
						break
					case 4:
						submitForm.storageArea = this.fromValue1
						submitForm.storageLine = this.fromValue2
						submitForm.storagePoint = this.fromValue3
						submitForm.storageId = e
						return
				}
				const res = await getListAPI(submitForm)
				switch(index) {
					case 1:
						this.fromRange2 = res.data.storageLine.map(item => {
							return {
								text: item,
								value: item
							}
						})
						break
					case 2:
						this.fromRange3 = res.data.storagePoint.map(item => {
							return {
								text: item,
								value: item
							}
						})
						break
					case 3:
						this.fromRange4 = res.data.storageId.map(item => {
							return {
								text: item,
								value: item
							}
						})
						break
				}
			},
			queryInfo() {
				if (this.query.kurumaId) {
					this.checkInfo('kuruma')
				} else {
					this.checkInfo('storageCode')
				}
			},
			async checkInfo(val) {
				const submitForm = {
					// TODO
					containerId: '',
					storageId: ''
				}
				console.log(submitForm)
				switch(val) {
					case 'kuruma':
						submitForm.containerId = this.query.kurumaId
						break
					case 'storageCode':
						submitForm.storageId = this.fromValue4
						break
				}
				const res = await checkInfoAPI(submitForm)
				if (res.code === 200) {
					// TODO 查询成功
					console.log(res)
					this.list = res.data
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async unBind() {
				// TODO
				const submitForm = {
					containerId: this.list[0].containerId, 
					storageId: this.list[0].storageId
				}
				const res = await unBindKurumaAPI(submitForm)
				if (res.code === 200) {
					// TODO 解除绑定
					this.reset()
					this.$refs.uToast.show({
						type: 'success',
						message: '解除绑定成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			clearTimer(timer) {
				if (timer) clearTimeout(timer)
			},
			blurInput() {
				this.clearTimer(this.timer)
				this.timer = setTimeout(() => {
					this.visible = false
				}, 500)
			},
			focusInput() {
				if (this.fromRange4.length === 0) {
					return
				}
				this.visible = true
			},
			async confirmInput(e) {
				const res = await searchDescriptionAPI(e)
				if (res.code === 200) {
					if (res.data) {
						this.fromValue1 = res.data.storageArea
						this.fromChange(this.fromValue1, 1)
						this.fromValue2 = res.data.storageLine
						this.fromChange(this.fromValue2, 2)
						this.fromValue3 = res.data.storagePoint
						this.fromChange(this.fromValue3, 3)
						this.fromValue4 = res.data.storageId
					} else {
						this.fromValue1 = ''
						this.fromValue2 = ''
						this.fromValue3 = ''
						this.fromValue4 = ''
						this.fromRange2 = []
						this.fromRange3 = []
						this.fromRange4 = []
						return this.$refs.uToast.show({
							type: 'warning',
							message: '储位号不正确或该储位无信息'
						})
					}
				}
			},
			clearInput(val) {
				this.fromValue1 = ''
				this.fromValue2 = ''
				this.fromValue3 = ''
				this.fromValue4 = ''
				this.fromRange2 = []
				this.fromRange3 = []
				this.fromRange4 = []
			}
		}
	}
</script>

<style lang="scss">
.commonButton {
	width: 100%;
	display: flex;
	gap: 20rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 15rpx;
	justify-content: space-between;
	background-color: #fff;
}

::v-deep uni-view.u-input {
	padding: 6px 0 !important;
}

// ::v-deep div.uni-input-placeholder.input-placeholder {
// 	color: #6a6a6a !important;
// }

::v-deep uni-input.u-input__content__field-wrapper__field {
	font-size: 6px !important;
}

// right
::v-deep uni-view.u-form-item__body {
	padding: 0 !important;
}
// ::v-deep div.uni-input-placeholder.input-placeholder {
// 	font-size: 14rpx !important;
// }

// left
::v-deep uni-view.uni-select {
	padding: 0 !important;
	font-size: 14rpx !important;
}
::v-deep uni-view.uni-select__input-text {
	max-width: 160rpx !important;
}
::v-deep uni-view.uni-select__selector-item {
	font-size: 14rpx !important;
}
::v-deep uni-view.uni-select__selector {
	width: auto !important;
}
::v-deep div.uni-scroll-view-content {
	width: 200rpx !important;
}
::v-deep uni-text.uni-icons.uniui-bottom {
	font-size: 30rpx !important;
}
::v-deep uni-text.uni-icons.uniui-top {
	font-size: 30rpx !important;
}

::v-deep .uni-input-placeholder {
	font-size: 12px !important;
	color: #6a6a6a !important;
}

.people-item {
	height: 70rpx;
	line-height: 70rpx;
	overflow: hidden;
	padding: 0 15rpx;
}

.people-item:hover {
	background-color: #efefef; /* 鼠标悬停时的背景颜色 */
}

</style>
